<template>
    <!-- 创业导师 -->
    <div class="curriculum-resources-container">
      <header>
        <el-form ref="search" :model="searchForm" inline label-width="100px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="会员名称" prop="name">
                <el-input v-model="searchForm.name" type="text" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="会员手机" prop="name">
                <el-input v-model="searchForm.phone" type="text" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <!-- <el-col :span="8">
              <el-form-item label="注册时间" prop="status">
                <el-date-picker v-model="searchForm.status" type="date" placeholder="选择日期" />
              </el-form-item>
            </el-col> -->
            <el-col :span="8">
              <el-form-item>
                <el-button @click="SearchReset('search')">重置</el-button>
                <el-button type="primary" :loading="searchLoading" @click="SearchSubmit">查询</el-button>
                <!-- <el-button type="primary" @click="CreateForm">新增</el-button> -->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </header>
      <article>
        <Table
          :table-data="tableConfig.data"
          :table-column-options="tableConfig.columns"
          :table-data-total="tableConfig.data.total"
          :page="searchForm.pageNum"
          :size="searchForm.pageSize"
          @tableUpdate="CurrentChange"
        >
          <template #operation="{ data }">
            <el-button type="text" @click="TableEdit(data)">编辑</el-button>
            <el-button type="text" @click="recordConfig.show = true">充值记录</el-button>
            <el-button type="text" @click="TableDelete(data)">删除</el-button>
          </template>
        </Table>
      </article>
      <!-- create/edit form modal -->
      <el-dialog
        :title="modalConfig.title"
        :visible.sync="modalConfig.show"
        width="50%"
        :before-close="() => FormCancel('formData')"
      >
        <el-form ref="formData" :model="modalConfig.formData" inline label-position="right" label-width="120px">
          <el-form-item label="用户名" required prop="name">
            <el-input v-model="modalConfig.formData.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="手机号" required prop="organizationName">
            <el-input v-model="modalConfig.formData.phone" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="头像" required prop="head">
            <!-- <img src="../../assets/video.png" alt=""> -->
            <!-- <qn-upload v-model="modalConfig.formData.head" format-type="img" /> -->
          </el-form-item>
          <el-divider />
          <el-form-item style="text-align: right;">
            <el-button @click="FormCancel('formData')">取消</el-button>
            <el-button type="primary" @click="FormSubmit">确定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog
        :title="充值记录"
        :visible.sync="recordConfig.show"
        width="50%"
        :before-close="() => recordConfig.show = false"
      >
        <Table
          :table-data="recordConfig.data"
          :table-column-options="recordConfig.columns"
          :table-data-total="recordConfig.data.total"
          :page="searchForm.pageNum"
          :size="searchForm.pageSize"
          @tableUpdate="CurrentChange"
        />
      </el-dialog>
    </div>
  </template>
  
  <script>
  import Table from '@/components/Table/index'
//   import qnUpload from '@/components/Upload/SingleImage3'
//   import { Add, Updata, Del, Detail } from '@/api/teacher'
  export default {
    name: 'EntrepreneurialActivity',
    components: {
      Table
    },
    data() {
      return {
        selectval: 1,
        talkDialog: false,
        viewTalkDialog: false,
        searchLoading: false,
        tagsShow: false,
        DICTDialog: false,
        talkcon: '',
        talkList: {},
        talkDetail: {},
        searchForm: {
          pageSize: 10,
          pageNum: 1,
          'searchStartTime': '',
          'searchEndTime': '',
          'keyword': '',
          'name': '',
          'type': null,
          'tags': null
        },
        recordConfig: {
          show: false,
          columns: [
            {
              label: '充值金额',
              prop: 'balance',
              width: 100
            },
            {
              label: '赠送金额',
              prop: 'send',
              width: 100
            },
            {
              label: '充值时间',
              prop: 'time',
              width: 100
            },
            {
              label: '充值状态',
              prop: 'status',
              width: 100
            }
          ],
          data: [{ id: 1, balance: '￥1000', send: '￥100', time: 'dddd', status: '充值成功' }]
  
        },
        tableConfig: {
          columns: [
            {
              label: '名称',
              prop: 'title',
              width: 100
            },
            {
              label: '手机',
              prop: 'phone',
              width: 100
            },
            // {
            //   label: '添加日期',
            //   prop: 'createTime',
            //   width: 140
            // },
            {
              label: '储值余额',
              prop: 'balance',
              width: 100
            },
            {
              label: '会员注册日期',
              prop: 'createTime',
              width: 100
            },
            {
              label: '操作',
              columnType: true,
              slotName: 'operation',
              width: 200
            }
          ],
          data: [{ id: 1, title: '会员名', balance: '￥1000', phone: '1801000000', type: '1', organizationName: '1', createTime: '2021-03-22 12:12:12', status: '1'}]
        },
        modalConfig: {
          title: '新增',
          show: false,
          formData: {
            head: '',
            name: '',
            type: null,
            typeName: '',
            organizationName: null,
            positionName: null,
            fieldType: null,
            fieldName: null,
            guidelines: null,
            info: '',
            regionCode: null,
            regionName: null,
            address: '',
            remark: '',
            tags: null
          }
        },
        replayForm: {
          contactTeacherFormId: '',
          name: '',
          type: '',
          teacherId: '',
          teacherName: '',
          answer: '',
          remark: ''
        }
      }
    },
    async mounted() {
      this.TableList()
    },
    methods: {
      TableList() {
        // queryList(this.searchForm).then(res => {
        //   this.tableConfig.data = res.data
        // })
      },
      // 点击查询按钮
      SearchSubmit() {
        this.searchLoading = true
        setTimeout(() => {
          this.searchLoading = false
        }, 1000)
        this.TableList()
      },
      handlePictureCardPreview() {},
      handleRemove() {},
      // 点击重置按钮
      SearchReset(name) {
        this.$refs[name].resetFields()
        this.searchForm.pageNum = 1
        this.TableList()
      },
      // 点击新增按钮
      CreateForm() {
        this.modalConfig.show = true
        this.modalConfig.title = '新增'
        delete this.modalConfig.formData.id
      },
      // 分页数据回调
      CurrentChange(e) {
        this.searchForm.pageNum = e.page
        this.searchForm.pageSize = e.size
        this.TableList()
      },
      // 点击表格内删除
      TableDelete(data) {
        this.$confirm('你确定要删除此条数据吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          Del({ ids: [data.id] }).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.TableList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      // 点击表格内编辑
      TableEdit(data) {
        this.modalConfig.show = true
        this.modalConfig.title = '编辑'
        Detail(data.id).then(res => {
          this.modalConfig.formData = res.data // JSON.parse(JSON.stringify(data))
        })
      },
      // 点击表单确定
      async FormSubmit() {
        this.modalConfig.show = false
        // this.modalConfig.formData.tags = [{ id: '1717556711792857089', tagName: '投资11' }]
        // console.log(this.modalConfig.formData, 1111)
        if (this.modalConfig.formData.id) {
          await Updata(this.modalConfig.formData)
        } else {
          await Add(this.modalConfig.formData)
        }
        this.$refs.formData.resetFields()
        await this.TableList()
      },
      // 点击表单取消
      FormCancel(name) {
        this.DICTDialog = false
        this.modalConfig.show = false
        this.$refs[name].resetFields()
        this.$forceUpdate()
      }
    }
  }
  </script>
  
  <style lang="less" scoped>
  .el-form-item{
    display: flex !important;
  }
  .el-form-item__content{
    width: 100%;
  }
  .el-select{
    width: 100%;
  }
  .curriculum-resources-container{
      padding: 20px;
  }
  .viewPic{
      height:148px;
      width:100px;
  }
  
  .talkitem{
    .left{
      text-align: left;
    }
    .right{text-align: right;
      span{
        background: #1890ff;
        color:#fff;
      }
    }
    .talkcon{
      span{
        display:inline-table;
        margin:0 0 10px 0;
        padding:5px 10px;
        border:solid 1px #ccc;
        border-radius: 8px;
      }
  
    }
  }
  </style>
  